﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>翻转特效</title>
    <link href="YanGantAdd.css" rel="stylesheet" type="text/css" />
    <link href="../../CSS/Web/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../Scripts/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="../../CSS/Web/bootstrap/js/bootstrap.js"></script>

    <script type="text/javascript" src="YanGantAdd.js"></script>
        <script type="text/javascript" src="../../Scripts/Common.js"></script>
    <style>
        
        .flip-container {
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            -ms-perspective: 1000;
            perspective: 1000;
            -ms-transform: perspective(1000px);
            -moz-transform: perspective(1000px);
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            border: 1px solid #ccc;
        }

            .flip-container:hover .back, .flip-container.hover .back {
                -webkit-transform: rotateY(0deg);
                -moz-transform: rotateY(0deg);
                -o-transform: rotateY(0deg);
                -ms-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }

            .flip-container:hover .front, .flip-container.hover .front {
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
                -o-transform: rotateY(180deg);
                transform: rotateY(180deg);
            }

        .flip-container, .front, .back {
            width: 320px;
            height: 427px;
        }

        .flipper {
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -ms-transition: 0.6s;
            -moz-transition: 0.6s;
            -moz-transform: perspective(1000px);
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transition: 0.6s;
            transform-style: preserve-3d;
            position: relative;
        }

        .front, .back {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -moz-transition: 0.6s;
            -moz-transform-style: preserve-3d;
            -o-transition: 0.6s;
            -o-transform-style: preserve-3d;
            -ms-transition: 0.6s;
            -ms-transform-style: preserve-3d;
            transition: 0.6s;
            transform-style: preserve-3d;
            position: absolute;
            top: 0;
            left: 0;
        }

        .front {
            -webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            background: lightgreen;
            z-index: 2;
        }

        .back {
            background: lightblue;
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
            -o-transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }

        .front .name {
            font-size: 2em;
            display: inline-block;
            background: rgba(33, 33, 33, 0.9);
            color: #f8f8f8;
            font-family: Courier;
            padding: 5px 10px;
            border-radius: 5px;
            bottom: 60px;
            left: 25%;
            position: absolute;
            text-shadow: 0.1em 0.1em 0.05em #333;
            -webkit-transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }

        .back-logo {
            position: absolute;
            top: 40px;
            left: 90px;
            width: 160px;
            height: 117px;
            background: url(/wordpress/wp-content/uploads/2014/03/hack-logo.jpg) 0 0 no-repeat;
        }

        .back-title {
            font-weight: bold;
            color: #00304a;
            position: absolute;
            top: 180px;
            left: 0;
            right: 0;
            text-align: center;
            text-shadow: 0.1em 0.1em 0.05em #acd7e5;
            font-family: Courier;
            font-size: 2em;
        }

        .back p {
            position: absolute;
            bottom: 40px;
            left: 0;
            right: 0;
            text-align: center;
            padding: 0 20px;
        }

        .vertical.flip-container {
            position: relative;
        }

        .vertical .back {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }

        .vertical.flip-container .flipper {
            -webkit-transform-origin: 100% 213.5px;
            -moz-transform-origin: 100% 213.5px;
            -ms-transform-origin: 100% 213.5px;
            transform-origin: 100% 213.5px;
        }

        .front.pic {
            background: url('/wordpress/wp-content/uploads/2014/03/hacker.jpg') 0 0 no-repeat;
        }

        .vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            transform: rotateX(0deg);
        }

        .vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }
    </style>

</head>
<body>
   <div>
         <div class="flip-container lazy " ontouchstart="this.classList.toggle('hover');">
            <div class="flipper lazy ">
                <div class="front pic lazy "><span class="name lazy ">WebHek<br>
                    歪脖骇客</span></div>
                <div class="back lazy " style="background: #f8f8f8;">
                    <div class="back-logo lazy "></div>
                    <div class="back-title lazy ">@歪脖骇客</div>
                    <p>Mozilla Web Developer, MooTools &amp; jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>